<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>聊天</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
</head>
<style type="text/css">
.aui-content-padded {
    margin: 0 10px;
    padding: 10px 0;
}
.noFriend{
    font-size: 12px;
}
.addFriend{
    padding:5px 8px;
    color:#327afa;
}
.addFriend.aui-border:after{
    border-color:#327afa;
}
.proTitle{
    font-size: 14px;
    line-height: 15px;
}
.proLink.aui-list-view .aui-img-object{
    max-width: 70px;
    height: 70px;
    line-height: 70px;
}
.proStock{
    color:#a2a2a2;
    font-size: 12px;
}
.sendLink{
    padding:10px 0;
    text-align: center;
}
</style>
<body>
    <!-- <div class="aui-content-padded" id="messageList"></div> -->

    <ul class="aui-list-view noFriend">
       <li class="aui-list-view-cell">
           你们还是陌生人，加为人脉方便下次联系
               <span class="menuRgiht addFriend aui-border">加为人脉</span>
           </a>
       </li>
    </ul>

    <ul class="aui-list-view proLink">
       <li class="aui-list-view-cell aui-img">
           <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
           <div class="aui-img-body aui-ellipsis-2 proTitle">
               图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
           </div>
           <div class="aui-img-body proPrice">
               ￥25
           </div>
           <div class="aui-img-body proStock">
               成交256笔
           </div>
       </li>
       <li class="sendLink">
           <span class="menuRgiht addFriend aui-border">发送商品链接</span>
       </li>
    </ul>
    <div class="aui-content aui-content-padded" id="message-content">
        <p class="aui-text-center history-date">7-16 20:00</p>
        <div class="aui-chat-sender">
            <div class="aui-chat-sender-avatar"><img src="../image/shili.jpg"></div>
            <div class="aui-chat-sender-cont">
                <div class="aui-chat-right-triangle"></div>
                <span>Hello!!</span>
            </div>
        </div>
        <div class="aui-chat-receiver">
            <div class="aui-chat-receiver-avatar"><img src="../image/dongtai.jpg"></div>
            <div class="aui-chat-receiver-cont">
                <div class="aui-chat-left-triangle"></div>
                <span>你好！</span>
            </div>
        </div>
        <div class="aui-chat-sender">
            <div class="aui-chat-sender-avatar"><img src="../image/shili.jpg"></div>
            <div class="aui-chat-sender-cont">
                <div class="aui-chat-right-triangle"></div>
                <span>使用字体图标的好处就是大小和颜色可以自由控制，同时还能方便的增加背景等效果。使用图标时请确保字体文件和css文件在同一目录下</span>
            </div>
        </div>
        <div class="aui-chat-receiver">
            <div class="aui-chat-receiver-avatar"><img src="../image/dongtai.jpg"></div>
            <div class="aui-chat-receiver-cont">
                <div class="aui-chat-left-triangle"></div>
                <span>使用字体图标的好处就是大小和颜色可以自由控制，</span>
            </div>
        </div>
        <div class="aui-chat-sender">
            <div class="aui-chat-sender-avatar"><img src="../image/shili.jpg"></div>
            <div class="aui-chat-sender-cont">
                <div class="aui-chat-right-triangle"></div>
                <span>Hello!!</span>
            </div>
        </div>
        <div class="aui-chat-receiver">
            <div class="aui-chat-receiver-avatar"><img src="../image/dongtai.jpg"></div>
            <div class="aui-chat-receiver-cont">
                <div class="aui-chat-left-triangle"></div>
                <span>你好！</span>
            </div>
        </div>
        <div class="aui-chat-sender">
            <div class="aui-chat-sender-avatar"><img src="../image/shili.jpg"></div>
            <div class="aui-chat-sender-cont">
                <div class="aui-chat-right-triangle"></div>
                <span>使用字体图标的好处就是大小和颜色可以自由控制，同时还能方便的增加背景等效果。使用图标时请确保字体文件和css文件在同一目录下</span>
            </div>
        </div>
        <div class="aui-chat-receiver">
            <div class="aui-chat-receiver-avatar"><img src="../image/dongtai.jpg"></div>
            <div class="aui-chat-receiver-cont">
                <div class="aui-chat-left-triangle"></div>
                <span>使用字体图标的好处就是大小和颜色可以自由控制，</span>
            </div>
        </div>
        <div class="aui-chat-sender">
            <div class="aui-chat-sender-avatar"><img src="../image/shili.jpg"></div>
            <div class="aui-chat-sender-cont">
                <div class="aui-chat-right-triangle"></div>
                <span>使用字体图标的好处就是大小和颜色可以自由控制，同时还能方便的增加背景等效果。使用图标时请确保字体文件和css文件在同一目录下</span>
            </div>
        </div>
        <div class="aui-chat-receiver">
            <div class="aui-chat-receiver-avatar"><img src="../image/dongtai.jpg"></div>
            <div class="aui-chat-receiver-cont">
                <div class="aui-chat-left-triangle"></div>
                <span>使用字体图标的好处就是大小和颜色可以自由控制，</span>
            </div>
        </div>
    </div>
</body>
<!-- 这个弹出的 -->
<div class="popHome ">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <!-- 新消息通过控制newMeg样式 -->
             <i class="aui-iconfont aui-icon-comment newMeg"></i><span>我的消息 </span>
        </li>
        <li class="aui-list-view-cell">
             <i class="aui-iconfont aui-icon-home"></i><span>首页</span>
        </li>
    </ul>
</div>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript">
    function playVoice(voicePath,messageId){
        $api.addCls($api.byId("messageVoice-"+messageId),'aui-text-warning');
        api.startPlay({
            path: voicePath
        },function(){
            $api.removeCls($api.byId("messageVoice-"+messageId),'aui-text-warning');
        });
    }
    var myAvatar,
        targetId,targetAvatar,targetNickname,
        chatBox,
        sourcePath = "widget://image/emotion",//表情存放目录
        emotionData;//存储表情
    apiready = function(){
        myAvatar = $api.getStorage('avatar');
        targetId = api.pageParam.targetId;
        targetAvatar = api.pageParam.targetAvatar;
        targetNickname = api.pageParam.targetNickname;
        api.parseTapmode();
        //表情图片处理
        getImgsPaths(sourcePath, function (emotion) {
            emotionData = emotion;
        });
        //获取历史消息
        getHistoryMessages();
        //监听来自消息列表的新消息
        api.addEventListener({
            name: 'getNewMessages'
        }, function(ret){
            //alert(JSON.stringify(ret.value));
            if(ret && ret.value){
                //如果当前消息的目标id等于当前会话目标id，写入，否则状态栏提醒
                if(ret.value.message.targetId==targetId){
                    var html = '';
                    html += '<div class="aui-chat-receiver" id="message-'+ret.value.message.messageId+'">';
                    html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>';
                    html += '<div class="aui-chat-receiver-cont">';
                    html += '<div class="aui-chat-left-triangle"></div>';
                    switch(ret.value.message.objectName){
                        //文字消息
                        case 'RC:TxtMsg':
                            html += '<span>'+transText(ret.value.message.content.text)+'</span>';
                        break;
                        //图片消息
                        case 'RC:ImgMsg':
                            html += '<span class="aui-chat-img chat-img"><img src="'+ret.value.message.content.imageUrl+'" /></span>';
                        break;
                        //语音消息
                        case 'RC:VcMsg':
                            //alert(JSON.stringify(ret.value.message.content));
                            html += '<div class="aui-chat-status">'+ret.value.message.content.duration+'s</div>';
                            html += '<span tapmode onclick="playVoice(\''+ret.value.message.content.voicePath+'\',\''+ret.value.message.messageId+'\')" ><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+ret.value.message.messageId+'"></i></span>';
                        break;
                        //图文消息
                        case 'RC:ImgTextMsg':
                            html += '<span>[图文消息]</span>';
                        break;
                        //位置消息
                        case 'RC:LBSMsg':
                            html += '<span class="aui-chat-img"><img src="http://api.map.baidu.com/staticimage?center='+ret.value.message.content.longitude+','+ret.value.message.content.latitude+'&width=300&height=180&zoom=15&copyright=1" /></span>';
                            html += '<p>'+ret.value.message.content.poi+'</p>';
                        break;
                    }
                    
                    html += '</div>';
                    html += '</div>';
                    $api.append($api.byId("messageList"),html);
                    api.parseTapmode();
                    setTimeout(function(){
                        window.scrollTo(0,$api.offset($api.byId("messageList")).h);
                    },100)
                    
                }
            }

        })
        //监听发送的新消息
        api.addEventListener({
            name: 'backSendMessage'
        }, function(ret){
            if(ret && ret.value){
                //alert(JSON.stringify(ret.value));
                //如果当前消息的目标id等于当前会话目标id，写入，否则状态栏提醒
                if(ret.value.message.targetId==targetId){
                    var html = '';
                    html += '<div class="aui-chat-sender" id="message-'+ret.value.message.messageId+'">';
                    html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>';
                    html += '<div class="aui-chat-sender-cont">';
                    html += '<div class="aui-chat-right-triangle"></div>';
                    switch(ret.value.message.objectName){
                        //文字消息
                        case 'RC:TxtMsg':
                            html += '<span>'+transText(ret.value.message.content.text)+'</span>';
                        break;
                        //图片消息
                        case 'RC:ImgMsg':
                            html += '<div class="aui-chat-status chat-img" id="messageStatus-'+ret.value.message.messageId+'"><i class="aui-iconfont aui-icon-loading aui-chat-progress"></i></div>';
                            html += '<span class="aui-chat-img"><img src="'+ret.value.message.content.thumbPath+'" /></span>';
                        break;
                        //语音消息
                        case 'RC:VcMsg':
                            //alert(JSON.stringify(ret.value.message.content));
                            html += '<div class="aui-chat-status">'+ret.value.message.content.duration+'s</div>';
                            html += '<span tapmode onclick="playVoice(\''+ret.value.message.content.voicePath+'\',\''+ret.value.message.messageId+'\')"><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+ret.value.message.messageId+'"></i></span>';
                        break;
                        //图文消息
                        case 'RC:ImgTextMsg':
                            html += '<span>[图文消息]</span>';
                        break;
                        //位置消息
                        case 'RC:LBSMsg':
                            html += '<span class="aui-chat-img"><img src="http://api.map.baidu.com/staticimage?center='+ret.value.message.content.longitude+','+ret.value.message.content.latitude+'&width=300&height=180&zoom=15&copyright=1" /></span>';
                            html += '<p>'+ret.value.message.content.poi+'</p>';
                        break;
                    }
                    
                    html += '</div>';
                    html += '</div>';
                    $api.append($api.byId("messageList"),html);
                    api.parseTapmode();
                    window.scrollTo(0,$api.offset($api.byId("messageList")).h);
                }
            }
        })
        //监听发送的新消息是否完成
        api.addEventListener({
            name: 'backSendMessageSuccess'
        }, function(ret){
            if(ret && ret.value){
                if($api.byId("messageStatus-"+ret.value.messageId)){
                    $api.remove($api.byId("messageStatus-"+ret.value.messageId));
                }
            }
        })
        
        chatBox = api.require('UIChatBox');
        openChatBox();
        //监听键盘聊天框键盘弹出,用于调整聊天窗口高度
        chatBox.addEventListener({
            target: 'inputBar',
            name: 'move'
        }, function(ret,err){
            if(ret.panelHeight>0){
                api.setFrameAttr({
                    name: 'chat_private_frm',
                    rect:{
                        h:api.frameHeight-ret.panelHeight
                    }
                });
            }else{
                api.setFrameAttr({
                    name: 'chat_private_frm',
                    rect:{
                        h:api.frameHeight
                    }
                });
            }
            setTimeout(function(){
                window.scrollTo(0,$api.offset($api.byId("messageList")).h);
            },200)
            
        });
        //监听按下录音
        chatBox.addEventListener({
            target: 'recordBtn',
            name: 'press'
        }, function(ret,err){
            api.startRecord({
                //path: 'fs://1.amr'
            });
        });
        //监听松开录音键
        chatBox.addEventListener({
            target: 'recordBtn',
            name: 'press_cancel'
        }, function(ret,err){
            //松开后停止录音
            api.stopRecord(
                function(ret,err){
                    if (ret && ret.duration > 0) {
                        api.sendEvent({
                            name:'sendMessage',
                            extra: {
                                targetId:targetId,
                                objectName:'RC:VcMsg',
                                conversationType:'PRIVATE',
                                message:ret
                            }
                        })
                        //api.alert({msg:('文件路径--'+ret.path+';录音时长:'+ret.duration+'s')});
                    }
                }
            );
        });
    }
    //获取历史消息
    function getHistoryMessages(){
        //通过sendEvent方法从message_list中获取当前会话历史消息,发送目标id，消息类型，最后一条id
        api.sendEvent({
            name: 'getHistoryMessages',
            extra: {targetId:targetId,type:'PRIVATE'}
        });
        //监听获取历史消息
        api.addEventListener({
            name: 'backHistoryMessages'
        }, function(ret){
            //alert(JSON.stringify(ret.value.message));
            if(ret && ret.value.message){
                var myUserid = $api.getStorage('userid');
                if(ret.value.message){
                    var messageList = ret.value.message.sort(getSortFun('asc', 'sentTime'));
                    var html = '';
                    for(var i in messageList){
                        if(messageList[i].senderUserId==myUserid){
                            //当前发送用户
                            html += '<div class="aui-chat-sender" id="message-'+messageList[i].messageId+'">';
                            html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>';
                            html += '<div class="aui-chat-sender-cont">';
                            html += '<div class="aui-chat-right-triangle"></div>';
                        }else{
                            html += '<div class="aui-chat-receiver" id="message-'+messageList[i].messageId+'">';
                            html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>';
                            html += '<div class="aui-chat-receiver-cont">';
                            html += '<div class="aui-chat-left-triangle"></div>';
                        }
                        switch(messageList[i].objectName){

                            //文字消息
                            case 'RC:TxtMsg':
                                html += '<span>'+transText(messageList[i].content.text)+'</span>';
                            break;
                            //图片消息
                            case 'RC:ImgMsg':
                                html += '<span class="aui-chat-img chat-img"><img src="'+messageList[i].content.imageUrl+'" /></span>';
                            break;
                            //语音消息
                            case 'RC:VcMsg':
                                //html += '<span>[语音消息]</span>';
                                html += '<div class="aui-chat-status">'+messageList[i].content.duration+'s</div>';
                                html += '<span tapmode onclick="playVoice(\''+messageList[i].content.voicePath+'\',\''+messageList[i].messageId+'\')"><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+messageList[i].messageId+'"></i></span>';
                            break;
                            //图文消息
                            case 'RC:ImgTextMsg':
                                html += '<span>[图文消息]</span>';
                            break;
                            //位置消息
                            case 'RC:LBSMsg':
                                html += '<span class="aui-chat-img"><img src="http://api.map.baidu.com/staticimage?center='+messageList[i].content.longitude+','+messageList[i].content.latitude+'&width=300&height=180&zoom=15&copyright=1" /></span>';
                                html += '<p>'+messageList[i].content.poi+'</p>';
                            break;
                        }
                        
                        html += '</div>';
                        html += '</div>';
                    }
                    $api.prepend($api.byId("messageList"),html);
                    api.parseTapmode();
                    setTimeout(function(){
                        window.scrollTo(0,$api.offset($api.byId("messageList")).h);
                    },300)
                    
                }
            }
        });
    }
    //排序函数
    function getSortFun(order, sortBy) {
        var ordAlpah = (order == 'asc') ? '>' : '<';
        var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
        return sortFun;
    }
    //表情处理
    function transText(text, imgWidth, imgHeight){
        var imgWidth = imgWidth || 24;
        var imgHeight = imgHeight || 24;
        var regx= /\[(.*?)\]/gm;
        var textTransed = text.replace(regx,function(match){
            var imgSrc = emotionData[match];
            if( !imgSrc){ /* 说明不对应任何表情,直接返回即可.*/
                return match;
            }
            var img = "<img src='" + imgSrc+ "' width='" + imgWidth +  "' height ='" + imgHeight +"' />";
            return img;
        });
        return textTransed;   
    }
    /*获取所有表情图片的名称和真实URL地址，以JSON对象形式返回。其中以表情文本为 属性名，以图片真实路径为属性值*/
    function getImgsPaths(sourcePathOfChatBox, callback){
        var jsonPath = sourcePathOfChatBox + "/emotion.json";//表情的JSON数组
        api.readFile({
            path: jsonPath
        },function(ret,err){
            if(ret.status){
                var emotionArray = JSON.parse(ret.data);
                var emotion = {};
                for(var i in emotionArray){
                    var emotionItem = emotionArray[i];
                    var emotionText = emotionItem["text"];
                    var emotionUrl = "../image/emotion/"+emotionItem["name"]+".png";
                    emotion[emotionText] = emotionUrl;
                }
                /*把emotion对象 回调出去*/
                if("function" === typeof(callback)){
                    callback(emotion);
                }
            }
        });
    }
    function openChatBox(){
        chatBox.open({
            placeholder: '',
            maxRows: 4,
            emotionPath: 'widget://image/emotion',
            texts: {
                recordBtn: {
                    normalTitle: '按住 说话',
                    activeTitle: '松开 结束'
                }
            },
            styles: {
                inputBar: {
                    borderColor: '#d9d9d9',
                    bgColor: '#f2f2f2'
                },
                inputBox: {
                    borderColor: '#B3B3B3',
                    bgColor: '#FFFFFF'
                },
                emotionBtn: {
                    normalImg: 'widget://image/chatBox/face1.png'
                },
                extrasBtn: {
                    normalImg: 'widget://image/chatBox/add1.png'
                },
                keyboardBtn: {
                    normalImg: 'widget://image/chatBox/key1.png'
                },
                speechBtn: {
                    normalImg: 'widget://image/chatBox/key3.png'
                },
                recordBtn: {
                    normalBg: '#c4c4c4',
                    activeBg: '#999999',
                    color: '#000',
                    size: 14
                },
                indicator: {
                    target: 'both',
                    color: '#c4c4c4',
                    activeColor: '#9e9e9e'
                }
            },
            extras: {
                titleSize: 10,
                titleColor: '#a3a3a3',
                btns: [{
                    title: '图片',
                    normalImg: 'widget://image/chatBox/album1.png',
                    activeImg: 'widget://image/chatBox/album2.png'
                },{
                    title: '拍照',
                    normalImg: 'widget://image/chatBox/cam1.png',
                    activeImg: 'widget://image/chatBox/cam2.png'
                },{
                    title: '位置',
                    normalImg: 'widget://image/chatBox/loc1.png',
                    activeImg: 'widget://image/chatBox/loc2.png'
                }]
            }
        }, function(ret){
            //点击附加功能面板
            if(ret.eventType == 'clickExtras'){
                //alert("用户点击了第"+ ret.index +"个按钮");
                if(ret.index==0){
                    //图片
                    api.getPicture({
                        sourceType: 'library',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        destinationType: 'url',
                        allowEdit: true,
                        quality: 70,
                        targetWidth:320,
                        saveToPhotoAlbum: false
                    }, function(ret, err){ 
                        if (ret) {
                            api.sendEvent({
                                name:'sendMessage',
                                extra: {
                                    targetId:targetId,
                                    objectName:'RC:ImgMsg',
                                    conversationType:'PRIVATE',
                                    message:ret.data
                                }
                            })
                        }
                    });
                }else if(ret.index==1){
                    //图片
                    api.getPicture({
                        sourceType: 'camera',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        destinationType: 'url',
                        allowEdit: true,
                        quality: 70,
                        targetWidth:640,
                        saveToPhotoAlbum: false
                    }, function(ret, err){ 
                        if (ret) {
                            api.sendEvent({
                                name:'sendMessage',
                                extra: {
                                    targetId:targetId,
                                    objectName:'RC:ImgMsg',
                                    conversationType:'PRIVATE',
                                    message:ret.data
                                }
                            })
                        }
                    });
                }else if(ret.index==2){
                    //位置
                    api.openWin({
                        name:'bmap_add_win',
                        url:'bmap_add_win.html',
                        delay:300,
                        pageParam:{
                            targetId:targetId
                        },
                        animation:{
                            type:'fade'
                        }
                    })
                }
                
            }
            //点击发送按钮
            if(ret.eventType == 'send' && ret.msg){
                //通过sendEvent将发送内容广博，消息页面接收并广播回来
                //单聊文字消息类型
                api.sendEvent({
                    name:'sendMessage',
                    extra: {
                        targetId:targetId,
                        objectName:'RC:TxtMsg',
                        conversationType:'PRIVATE',
                        message:ret.msg
                    }
                })
                //alert('输入的内容是：'+ transText(ret.msg));
            }
        });
    }
    
    //来自win的执行显示遮罩方法
    var mask2;
    function showMask(){
        mask2=new mui.createMask(closeWinMask);
        mask2.show();
        $(".popHome").addClass("pickAnimate");
    }
    // 接收来自win的关闭遮罩
    function hideFrmMask(){
        $(".popHome").removeClass("pickAnimate");
        mask2.myclose();
    }
    function closeWinMask(){
        $(".popHome").removeClass("pickAnimate");
        api.execScript({
            name: 'chat_win',
            script: 'closeWinMask()'
        })
    }
</script>
</html>